<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home', name: '' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods', name: '' }">订单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- body -->
    <el-card>

      <!-- header -->
      <div slot="header">
        <el-row style="padding-right: 12px;" type="flex" justify="space-between">
            <el-col>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-input v-model="xx" placeholder="输入关键词搜搜" size="normal" clearable @change=""></el-input>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-button type="primary" size="default" @click="">搜索</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-button type="primary" size="text" @click="">导出订单</el-button>
        </el-row>
      </div>


      <!-- card body -->
      <el-table :data="list" border stripe highlight-current-row height="530">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column width="180" label="订单号" prop="goods_title" />
        <el-table-column width="100" label="订单状态" prop="stock" />
        <el-table-column width="100" label="订单金额">
            <template scope="scope">
                <span>{{scope.row.unit_price.toFixed(2)}}</span>
            </template>
        </el-table-column>

        <el-table-column width="130" label="收货人姓名" prop="place" />
        <el-table-column width="130" label="收货人电话" prop="place" />
        <el-table-column width="130" label="收货地址" prop="place" />
        
        <el-table-column width="180" label="下单时间">
            <template scope="scope">
                <span>{{formatDate(scope.row.create_date)}}</span>
            </template>
        </el-table-column>
        

        <el-table-column label="订单状态">
            <template scope="scope">
                <span>待支付</span>
            </template>
        </el-table-column>


        <el-table-column width="180" label="操作" >
          <template slot-scope="scope">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-button type="primary" size="small" @click="delBtnClick(scope.row.gid)">查看详情</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" size="small" @click="loadEditPage(scope.row.gid)">发货</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!--删除确认弹出框-->
    <el-dialog title="提示" :visible.sync="showDel" width="30%">
         <span>确认删除该条数据吗</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="showDel = false">取 消</el-button>
            <el-button type="danger" @click="netDelGoods">删 除</el-button>
        </span>
    </el-dialog>

  </div>
</template>





<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  mounted() {
      this.netFetchGoodsList()
  },
  data() {
    return {
        showDel:false,
        gid:"", //要删除的商品id
        list: [],
    };
  },

  methods: {
    formatDate(date) {
        if (date == undefined) {
            return ""
        }
        return this.$dayjs(date).format("YYYY-MM-DD HH:mm:ss")
    },


    loadEditPage(goodsId) {
        this.$router.push({path:"/goods/edit",query:{goodsId}})
    },

    delBtnClick(gid) {
        this.gid= gid
        this.showDel = true
    },

    editBtnClick(data) {
      this.showEdit = true;
      this.currendTopic = data;
    },

    // net
    async netFetchGoodsList() {
        let {data,res} = await this.$http.get("/goods/list",this.currendTopic)
        let code = data.code
        if (code == 0) {
            this.list = data["data"]
        } else {
            this.$message.error(JSON.stringify(data.msg))
        }
    },

    async netDelGoods(gid) {
        let self = this
        this.showDel = false
        let {data,res} = await this.$http.post("/goods/del",{gid:this.gid})
        let code = data.code
        if (code == 0) {
            this.$message.success(JSON.stringify(data.msg))
            setTimeout(() => {
                self.netFetchGoodsList()
            }, 2000);
        } else {
            this.$message.error(JSON.stringify(data.msg))
        }
    },



  },
};
</script>

<style scoped>
</style>